/*
 * @Author: mikey.zhaopeng
 * @Date:   2016-05-26 15:55:20
 * @Last Modified by:   mikey.zhaopeng
 * @Last Modified time: 2016-07-13 16:16:28
 */

'use strict';
define([
    '../../../framework/base/baseView',
    '../../../framework/bean/ecCreativeTemplate',
    'text!../tpl/chooseDialog.html',
    'masonry',
    'imagesloaded'
], function(
    BaseView,
    ecCreativeTemplateModel,
    tpl,
    Masonry
) {
    function me() {
        BaseView.apply(this, arguments);
        var self = this;
        this.init = function(who, callback) {
            self.who = who;
            self.callback = callback;
            self.$root = $('#create-material-dialog');
            self.step2Key = 'createMaterialStep2'; //step2缓存
            self.render();
        }

        this.render = function() {
            self.$root.html(I18N.parse(tpl,'createMaterial'));
            self.$container = self.$root.find('.infinite_scroll');
            self.event();
            self.$root.modal('show');

        }

        this.event = function() {
            //modal打开先请求元素数据

            self.getElement();
            self.$root.find('.btn-ok').off('click').on('click', $.proxy(self.confirmElement, self));
        }

        /**
         * { 请求所有元素数据 }
         *
         * @method     getElement
         */
        this.getElement = function() {
            self.$container.empty();
            ecCreativeTemplateModel.allElement(null, function(res) {
                $.each(res, function(i, v) {
                    var eachGroup = '<div class="item masonry_brick">';
                    if (v.id == self.kit.getCache(self.step2Key, 'parentCategory' + (self.who * -1))) {
                        eachGroup += '<div class="item_t"><div class="title"><span>' + v.name + '</span></div></div><ul class="choose-group">';
                        $.each(v.children, function(j, k) {
                            eachGroup += '<li class="list-group-item" data-code="' + k.code + '" data-pid="' + k.pid + '" data-prop="' + k.property + '">' + k.context + '<span class="glyphicon glyphicon-ok"></span></li>';
                        });
                    } else {
                        eachGroup += '<div class="item_t"><div class="title"><span>' + v.name + '</span></div></div><ul class="">';
                        $.each(v.children, function(j, k) {
                            eachGroup += '<li class="list-group-item" name="can" data-code="' + k.code + '" data-pid="' + k.pid + '" data-prop="' + k.property + '">' + k.context + '<span class="glyphicon glyphicon-ok"></span></li>';
                        });
                    }
                    eachGroup += '</ul></div>';
                    self.$container.append(eachGroup);
                });
                self.$root.off('shown.bs.modal').on('shown.bs.modal', function() {
                    self.$container.show();
                    //$.bridget('masonry', Masonry, $);
                    self.$container.masonry({
                        itemSelector: '.masonry_brick',
                        columnWidth: 270,
                        originTop: true
                    });
                });

                self.bindElement();
            });
        }

        this.bindElement = function() {
            var eachLi = self.$root.find('.infinite_scroll li[name="can"]');
            eachLi.off('click').on('click', function() {
                eachLi.removeClass('choose');
                $(this).addClass('choose');
                $(".demo .list-group-item>span").hide();
                $(this).find('span').show();
            });
        }

        /**
         * { 确定选择元素 }
         *
         * @method     confirmElement
         */
        this.confirmElement = function() {
            var choose = self.$root.find('.infinite_scroll .choose');
            if (choose.length > 0) {
                self.kit.setCache(self.step2Key, 'parentCategory' + self.who, choose.data('pid'));
                self.callback(choose.data('pid'), choose.data('code'), choose.data('prop'), choose.text());
                self.$root.modal('hide');
            } else {
                Kit.alert2(self.i18n('pleaseSelectOneElement'));
            }
        }

        this.i18n = function(key) {
            return I18N.getText('createMaterial', key)
        }
    }
    return me;
});